<!--
 * @Autor: 王琛
 * @Description: 有按钮的轮播图页面
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#MenuSwiperPage {
  width: 100%;
  height: 100%;
  position: relative;

  .SwiperBox {
    width: 100%;
    height: 100%;

    .SwiperImage {
      width: 100%;
      height: 100%;
    }
  }

  .BtnListBox {
    width: 90%;
    height: 40px;
    position: absolute;
    bottom: calc(var(--BottomMenuAllHeight) + 10px);
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: space-around;
    align-items: center;


    .BtnItem{
      padding: 5px 8px;
      box-sizing: border-box;
      transition:all .5s;
    }
  }

}
</style>


<template>
  <div id="MenuSwiperPage">
    <van-swipe class="SwiperBox" ref='SwiperBox' :autoplay="500000" :show-indicators="false" @change="SwiperChange">
      <van-swipe-item v-for="(item,index) in _data.PageConfig?.PlanList" :key="index">
        <!-- 上部分户型简介展示 -->
        <img class="SwiperImage" :src="`${_data.PageConfig?.PageImgRoot}${item.ImgPath}`" alt="Image"/>
      </van-swipe-item>
    </van-swipe>

    <!-- 按钮列表 -->
    <div class="BtnListBox">
      <div :class="{BtnItem:true}" v-for="(item,index) in _data.PageConfig?.PlanList" :key="index" :style="`background: url('${_data.PageConfig?.PageImgRoot}${_data.CurSelectMenu.Name === item.Name ? `BtnBgSelect.png` : `BtnBg.png`}') no-repeat center center / 100% 100%`" @click="MenuBtn(item, index)">
        {{ item.Name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MenuSwiperPage">
import {useMainStore} from "src/pinia";
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";

const _state = useMainStore();
const _route = useRoute();

const SwiperBox = ref(null);
const _data = reactive({
  // 页面配置
  PageConfig: {},
  // 当前选择的菜单
  CurSelectMenu: {},
})

onMounted(() => {
  InitPageData();
})

/**
 * @description: 点击了菜单按钮
 * @author: 王琛
 * @Date: 2025-04-26 18:25:21
 * @param {*}
 * @return {*}
 */
function MenuBtn(Config, index) {
  try {
    if (Config.Name === _data.CurSelectMenu.Name) throw new Error('当前菜单没有发生变化');

    _data.CurSelectMenu = Config;

    // 轮播图发生变化
    SwiperBox.value.swipeTo(index, {immediate: true});
  } catch (e) {
    console.error('%c捕获报错-18:25:21', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}

/**
 * @description: 初始化楼层数据
 * @author: 王琛
 * @Date: 2025-04-26 00:13:45
 * @param {*}
 * @return {*}
 */
function InitPageData() {
  try {
    const PageConfigKey = _route.query?.PageConfigKey || false;

    if (!PageConfigKey) throw new Error('没有传入页面配置参数');

    const PageConfig = _state.pageDataConfig?.PageConfig[PageConfigKey] || false;

    if (!PageConfig) throw new Error('没有找到页面配置参数');

    _data.PageConfig = PageConfig;

  } catch (e) {
    console.error('%c捕获报错-00:13:45', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }
}

/**
 * @description: 轮播图发生变化之后
 * @author: 王琛
 * @Date: 2025-04-26 18:22:40
 * @param {*}
 * @return {*}
 */
function SwiperChange(Index) {
  try {
    // 获取当前菜单
    const CurSelectMenu = _data.PageConfig?.PlanList[Index] || false;

    if (!CurSelectMenu) throw new Error('没有找到当前菜单');

    if (_data.CurSelectMenu?.Name === CurSelectMenu.Name) throw new Error('当前菜单没有发生变化');

    _data.CurSelectMenu = CurSelectMenu;
  } catch (e) {
    console.error('%c捕获报错-18:22:40', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}
</script>